import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:xmshop/app/routes/app_pages.dart';
import 'package:xmshop/app/services/screenAdapter.dart';
import '../controllers/search_controller.dart';
import '../../../services/searchServices.dart';

class SearchView extends GetView<SearchPageController> {
  const SearchView({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(246, 246, 246, 1),
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(840),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromRGBO(246, 246, 246, 1),
            borderRadius: BorderRadius.circular(30),
          ),
          child: TextField(
            autofocus: true,
            style: TextStyle(fontSize: ScreenAdapter.fontSize(36)), //修改框框的字体
            decoration: InputDecoration(
              contentPadding: const EdgeInsets.all(0), //让输入居中,修改padding值
              prefixIcon: const Icon(Icons.search),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: BorderSide.none, //去掉边框
              ),
            ),
            onChanged: (value) {
              controller.keyWords.value = value;
            },
            onSubmitted: (value) {
              //保存搜索历史记录
              SearchServices.setHistoryData(value);
              //替换路由
              Get.offAndToNamed(
                Routes.PRODUCT_LIST,
                arguments: {"keywords": value},
              );
            }, //监听键盘的回车事件
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        actions: [
          TextButton(
            onPressed: () {
              //保存搜索历史记录
              SearchServices.setHistoryData(controller.keyWords.value);
              //替换路由跳转
              Get.offAndToNamed(
                Routes.PRODUCT_LIST,
                arguments: {"keywords": controller.keyWords.value},
              );
            },
            child: Text(
              "搜索",
              style: TextStyle(fontSize: ScreenAdapter.fontSize(36)),
            ),
          ),
        ],
        elevation: 0,
      ),
      body: ListView(
        padding: EdgeInsets.all(ScreenAdapter.height(20)),
        children: [
          Obx(
            () => controller.historyList.isNotEmpty
                ? Padding(
                    padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          "搜索历史",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: ScreenAdapter.fontSize(42),
                          ),
                        ),
                        IconButton(
                          onPressed: () {
                            Get.bottomSheet(
                              Container(
                                padding: EdgeInsets.all(
                                  ScreenAdapter.width(20),
                                ),
                                width: ScreenAdapter.width(1080),
                                height: ScreenAdapter.height(360),
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.vertical(
                                    top: Radius.circular(10),
                                  ),
                                ),
                                child: Column(
                                  children: [
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Text(
                                          "您确定要清空历史记录吗？",
                                          style: TextStyle(
                                            color: Colors.black54,
                                            fontSize: ScreenAdapter.fontSize(
                                              48,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    SizedBox(height: ScreenAdapter.height(40)),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        ElevatedButton(
                                          style: ElevatedButton.styleFrom(
                                            shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadiusGeometry.circular(
                                                    8,
                                                  ),
                                            ),
                                          ),
                                          onPressed: () {
                                            Get.back();
                                          },
                                          child: Text("取消"),
                                        ),
                                        SizedBox(
                                          width: ScreenAdapter.width(100),
                                        ),
                                        ElevatedButton(
                                          style: ElevatedButton.styleFrom(
                                            shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadiusGeometry.circular(
                                                    8,
                                                  ),
                                            ),
                                          ),
                                          onPressed: () {
                                            controller.clearHistoryData();
                                            Get.back();
                                          },
                                          child: Text("确定"),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                          icon: const Icon(Icons.delete),
                        ),
                      ],
                    ),
                  )
                : const Text(""),
          ),
          Obx(
            () => Wrap(
              children: controller.historyList.map((value) {
                return GestureDetector(
                  onLongPress: () {
                    Get.defaultDialog(
                      title: "提示信息！",
                      middleText: "您确定要删除吗？",
                      confirm: ElevatedButton(
                        onPressed: () {
                          controller.removeHistoryData(value);
                          Get.back();
                        },
                        child: const Text("确定"),
                      ),
                      cancel: ElevatedButton(
                        onPressed: () {
                          Get.back();
                        },
                        child: const Text("取消"),
                      ),
                    );
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(5),
                    ),
                    padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(32),
                      ScreenAdapter.width(16),
                      ScreenAdapter.width(32),
                      ScreenAdapter.width(16),
                    ),
                    margin: EdgeInsets.all(ScreenAdapter.height(16)),
                    child: Text(
                      value,
                      style: TextStyle(fontSize: ScreenAdapter.fontSize(36)),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              bottom: ScreenAdapter.height(20),
              top: ScreenAdapter.height(20),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  "猜你想搜",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: ScreenAdapter.fontSize(42),
                  ),
                ),
                const Icon(Icons.refresh),
              ],
            ),
          ),
          Wrap(
            children: [
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(5),
                ),
                padding: EdgeInsets.fromLTRB(
                  ScreenAdapter.width(32),
                  ScreenAdapter.width(16),
                  ScreenAdapter.width(32),
                  ScreenAdapter.width(16),
                ),
                margin: EdgeInsets.all(ScreenAdapter.height(16)),
                child: Text(
                  "手机",
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(36)),
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: ScreenAdapter.height(20)),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
            ),
            child: Column(
              children: [
                Container(
                  width: double.infinity,
                  height: ScreenAdapter.height(138),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/hot_search.png"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                SizedBox(
                  child: GridView.builder(
                    shrinkWrap: true,
                    itemCount: 8,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: ScreenAdapter.width(40),
                      mainAxisSpacing: ScreenAdapter.height(20),
                      childAspectRatio: 3 / 1,
                    ),
                    itemBuilder: ((context, index) {
                      return Row(
                        children: [
                          Container(
                            alignment: Alignment.center,
                            width: ScreenAdapter.width(120),
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            child: Image.network(
                              "https://www.itying.com/images/shouji.png",
                              fit: BoxFit.fitHeight,
                              errorBuilder: (context, error, stackTrace) {
                                return Container(
                                  color: Colors.grey[200],
                                  child: Icon(
                                    Icons.broken_image,
                                    color: Colors.grey[400],
                                  ),
                                );
                              },
                            ),
                          ),
                          Expanded(
                            child: Container(
                              padding: EdgeInsets.all(ScreenAdapter.width(10)),
                              alignment: Alignment.topLeft,
                              child: const Text("小米净化器 热水器 小米净化器"),
                            ),
                          ),
                        ],
                      );
                    }),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
